<template>
  <div class="custom_groups">
    <div v-if="item.name === 'listPinterest'">
      <ListPinterest
        :item="item"
        :index="0"
        :actions="actions"
        :active="0"
        :isDownLoadMore="false"
      >
        <template v-slot:right="{ sitem }">
          <RefreshButton :item="sitem"></RefreshButton>
        </template>
      </ListPinterest>
    </div>
    <div v-if="item.name === 'carousel'">
      <Carousel :item="item">
        <div slot="carouselcontent">test</div>
        <div slot="carouselhandle">
          <DownloadButton></DownloadButton>
        </div>
      </Carousel>
    </div>
    <div v-if="item.name === 'search'">
      <Search :item="item"></Search>
    </div>
    <div v-if="item.name === 'card'">
      <Card :item="item"></Card>
    </div>
    <div v-if="item.name === 'cardframe'">
      <CardFrame :item="item">
        <template v-slot:cardFrameContent="{ item }">
          <div v-for="(sitem, index) in item.data" :key="'list_index_' + index">
            <Groups :item="sitem" :isDownLoadMore="isDownLoadMore">
              <template v-slot:groupnewsHeaderRightSlot="{ item }">
                <router-link :to="{ name: item.moreRouter }">{{
                  $t("lang.更多")
                }}</router-link>
              </template>
              <template v-slot:navbarHeaderRightSlot="{ item }">
                <router-link :to="{ name: item.moreRouter }">{{
                  $t("lang.更多")
                }}</router-link>
              </template>
              <template v-slot:swipeItemSlot="{ item }">
                <slot name="swipeItemSlotItem" :swipeItem="item"></slot>
              </template>
              <template v-slot:swipeTabsItem="{ item }">
                <slot name="swipeTabsItemSlot" :item="item"></slot>
              </template>
              <template v-slot:tabPanel="{ swipeItem, item, index }">
                <slot
                  name="swipeTabPanelSlot"
                  :item="item"
                  :swipeItem="swipeItem"
                  :index="index"
                ></slot>
              </template>
              <template v-slot:couponCardButton="{ item }">
                <slot name="couponCardButtonSlot" :item="item"></slot>
              </template>
            </Groups>
          </div>
        </template>
      </CardFrame>
    </div>
    <div v-if="item.name === 'more'">
      <More :item="item">
        <template v-slot:moreContent="{ item }">
          <div v-for="(sitem, index) in item" :key="'more_index_' + index">
            {{ sitem }}{{ index }}
          </div>
        </template>
        <template v-slot:loadingIcon>
          <van-loading type="spinner" size="20" />
        </template>
      </More>
    </div>
    <div v-if="item.name === 'navbarList'">
      <NavbarList :item="item">
        <template v-slot:navbarHeaderRight="{ item }">
          <slot name="navbarHeaderRightSlot" :item="item"></slot>
        </template>
      </NavbarList>
    </div>
    <div v-if="item.name === 'swipe'">
      <Swipe :item="item"></Swipe>
    </div>
    <div v-if="item.name === 'swipeTask'">
      <Swipe :item="item"></Swipe>
    </div>
    <div v-if="item.name === 'swipeNoTask'">
      <Swipe :item="item">
        <template v-slot:swipeItem="{ swipeItem }">
          <slot name="swipeItemSlot" :item="swipeItem"></slot>
        </template>
      </Swipe>
    </div>
    <div v-if="item.name === 'videoView'">
      <VideoView :item="item"></VideoView>
    </div>
    <div v-if="item.name === 'groupnews'">
      <GroupNews :item="item">
        <template v-slot:groupnewsHeaderRight="{ item }">
          <slot name="groupnewsHeaderRightSlot" :item="item"></slot>
        </template>
      </GroupNews>
    </div>
    <div v-if="item.name === 'imgnews'">
      <ImgNews :item="item"></ImgNews>
    </div>
    <div v-if="item.name === 'news'">
      <News :item="item"></News>
    </div>
    <div v-if="item.name === 'sprite'">
      <Sprite :item="item">
        <template v-slot:spriteTop>
          <slot name="spriteTopItem"></slot>
        </template>
        <template v-slot:spriteBottom>
          <slot name="spriteBottomItem"></slot>
        </template>
      </Sprite>
    </div>
    <div v-if="item.name === 'echarts'">
      <Echarts :item="item">
        <template v-slot:echartsTop>
          <slot name="echartsTopItem"></slot>
        </template>
        <template v-slot:echartsBottom>
          <slot name="echartsBottomItem"></slot>
        </template>
      </Echarts>
    </div>
    <div v-if="item.name === 'icons'">
      <Icons :item="item" :index="index"></Icons>
    </div>
    <div v-if="item.name === 'marquee'">
      <Marquee :item="item"></Marquee>
    </div>
    <div v-if="item.name === 'crossBanner'">
      <Banner :item="item"></Banner>
    </div>
    <div v-if="item.name === 'singleBanner'">
      <Banner :item="item"></Banner>
    </div>
    <div v-if="item.name === 'unsymmetricLeft'">
      <Banner :item="item"></Banner>
    </div>
    <div v-if="item.name === 'unsymmetricRight'">
      <Banner :item="item"></Banner>
    </div>
    <div v-if="item.name === 'singleTaskBanner'">
      <Banner :item="item"></Banner>
    </div>
    <div v-if="item.name === 'multipleBanner'">
      <Banner :item="item"></Banner>
    </div>
    <div v-if="item.name === 'nounBanner'">
      <Banner :item="item"></Banner>
    </div>
    <div v-if="item.name === 'symmetryTaskBanner'">
      <Banner :item="item"></Banner>
    </div>
    <div v-if="item.name === 'lineBanner'">
      <Banner :item="item"></Banner>
    </div>
    <div v-if="item.name === 'floatBanner'">
      <Banner :item="item"></Banner>
    </div>
    <div v-if="item.name === 'groupPrice'">
      <GroupPrice :item="item"></GroupPrice>
    </div>
    <div v-if="item.name === 'userInfo'">
      <UserInfo :item="item"></UserInfo>
    </div>
    <div v-if="item.name === 'multipNavbar'">
      <MultipNavbar :item="item"></MultipNavbar>
    </div>
    <div v-if="item.name === 'videoList'">
      <VideoList :item="item"></VideoList>
    </div>
    <div v-if="item.name === 'videoAnimatePlayer'">
      <VideoAnimatePlayer :item="item"></VideoAnimatePlayer>
    </div>
    <div v-if="item.name === 'groupCells'">
      <GroupCells :item="item"></GroupCells>
    </div>
    <div v-if="item.name === 'goodsList'">
      <GoodsList :item="item" :isDownLoadMore="isDownLoadMore"></GoodsList>
    </div>
    <div v-if="item.name === 'couponCard'">
      <CouponCard :item="item">
        <template v-slot:couponCardButton="{ item }">
          <slot name="couponCardButton" :item="item"></slot>
        </template>
      </CouponCard>
    </div>
    <div v-if="item.name === 'swipeTabs'">
      <SwipeTabs :item="item">
        <template v-slot:tabItem="{ item }">
          <slot name="swipeTabsItem" :item="item"></slot>
        </template>
        <template v-slot:tabPanel="{ swipeItem, item, index }">
          <slot
            name="swipeTabPanel"
            :item="item"
            :swipeItem="swipeItem"
            :index="index"
          ></slot>
        </template>
      </SwipeTabs>
    </div>
    <div v-if="item.name === 'tabs'">
      <Tabs :item="item">
        <template v-slot:tabsContent="{ tabItem, index, active }">
          <ListPinterest
            :item="tabItem"
            :index="index"
            :actions="actions"
            :active="active"
            :isDownLoadMore="isDownLoadMore"
          ></ListPinterest>
        </template>
      </Tabs>
    </div>
  </div>
</template>
<script>
let mixins = {
  components: {
    Groups: () =>
      import(/* webpackChunkName:'groups' */ "../../components/groups/groups"),
    GoodsList: () =>
      import(
        /* webpackChunkName:'goodsList' */ "../../components/listPinterest/goodsList"
      ),
    CouponCard: () =>
      import(
        /* webpackChunkName:'couponCard' */ "../../components/card/couponCard"
      ),
    SwipeTabs: () =>
      import(
        /* webpackChunkName:'swipeTabs' */ "../../components/tabs/swipeTabs"
      ),
    VideoView: () =>
      import(
        /* webpackChunkName:'videoView' */ "../../components/videoList/videoView"
      ),
    GroupPrice: () =>
      import(
        /* webpackChunkName:'groupPrice' */ "../../components/groupPrice/groupPrice"
      ),
    UserInfo: () =>
      import(
        /* webpackChunkName:'userInfo' */ "../../components/userInfo/userInfo"
      ),
    GroupCells: () =>
      import(
        /* webpackChunkName:'groupCells' */ "../../components/groupcells/groupcells"
      ),
    Echarts: () =>
      import(
        /* webpackChunkName:'echarts' */ "../../components/echarts/echarts"
      ),
    VideoAnimatePlayer: () =>
      import(
        /* webpackChunkName:'videoAnimatePlayer' */ "../../components/videoAnimatePlayer/videoAnimatePlayer"
      ),
    VideoList: () =>
      import(
        /* webpackChunkName:'videoList' */ "../../components/videoList/videoList"
      ),
    Sprite: () =>
      import(/* webpackChunkName:'sprite' */ "../../components/sprite/sprite"),
    NavbarList: () =>
      import(
        /* webpackChunkName:'navbarList' */ "../../components/navbar/navbarList"
      ),
    MultipNavbar: () =>
      import(
        /* webpackChunkName:'multipNavbar' */ "../../components/navbar/multipNavbar"
      ),
    More: () =>
      import(/* webpackChunkName:'more' */ "../../components/more/more"),
    GroupNews: () =>
      import(
        /* webpackChunkName:'groupnews' */ "../../components/groupnews/groupnews"
      ),
    ImgNews: () =>
      import(
        /* webpackChunkName:'imgnews' */ "../../components/imgnews/imgnews"
      ),
    News: () =>
      import(/* webpackChunkName:"news" */ "../../components/news/news"),
    CardFrame: () =>
      import(
        /* webpackChunkName:'cardframe' */ "../../components/card/cardframe"
      ),
    Card: () =>
      import(/* webpackChunkName:'card' */ "../../components/card/card"),
    RefreshButton: () =>
      import(
        /* webpackChunkName:'refresh' */ "../../components/button/refresh"
      ),
    Carousel: () =>
      import(
        /* webpackChunkName:'carousel' */ "../../components/carousel/carousel"
      ),
    DownloadButton: () =>
      import(
        /* webpackChunkName:'downloadButton' */ "../../components/button/downloadButton"
      ),
    Search: () =>
      import(/* webpackChunkName:'search' */ "../../components/search/search"),

    Swipe: () =>
      import(/* webpackChunkName: 'swipe' */ "../../components/swipe/swipe"),
    Icons: () =>
      import(/* webpackChunkName: 'icons' */ "../../components/icons/icons"),
    Marquee: () =>
      import(
        /* webpackChunkName: 'marquee' */ "../../components/marquee/marquee"
      ),
    Tabs: () =>
      import(/* webpackChunkName: 'tabs' */ "../../components/tabs/tabs"),
    ListPinterest: () =>
      import(
        /* webpackChunkName: 'listPinterest' */ "../../components/listPinterest/listPinterest"
      ),
    Banner: () =>
      import(/* webpackChunkName:'banner' */ "../../components/banner/banner"),
  },
};
export default {
  name: "groups",
  mixins: [mixins],
  props: {
    item: {
      type: Object,
      default() {
        return {};
      },
    },
    index: {
      type: Number,
      default() {
        return 0;
      },
    },
  },
  data() {
    return {
      isShow: false,
      isDownLoadMore: false,
      actions: [
        {
          text: "test",
        },
        {
          text: "test",
        },
        {
          text: "test",
        },
        {
          text: "test",
        },
      ],
    };
  },
  mounted() {
    this.$on("getMoreData", this.getMoreData);
    this.$on("bannerButtonClickHandle", this.bannerButtonClickHandle);
  },
  methods: {
    bannerButtonClickHandle(v) {
      (this.$parent.bannerButtonClickHandle
        ? this.$parent
        : this.$parent.$parent
      ).$emit("bannerButtonClickHandle", v);
    },
    getMoreData(resolve, reject) {
      this.$store
        .dispatch("getMoreStateData", /* this.$props.item.api */ "api", {})
        .then((v) => {
          let promise = new Promise((resolve) => resolve(v));
          resolve(promise);
        })
        .catch((v) => {
          reject(v);
        });
    },
  },
};
</script>
<style lang="less">
@base: 23.44rem;
.custom_groups {
}
</style>
